<!DOCTYPE html>
<!--
/**
 * Copyright (c) 2006, Opera Software ASA
 * All rights reserved.
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are met:
 *
 *     * Redistributions of source code must retain the above copyright
 *       notice, this list of conditions and the following disclaimer.
 *     * Redistributions in binary form must reproduce the above copyright
 *       notice, this list of conditions and the following disclaimer in the
 *       documentation and/or other materials provided with the distribution.
 *     * Neither the name of Opera Software ASA nor the
 *       names of its contributors may be used to endorse or promote products
 *       derived from this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY OPERA SOFTWARE ASA AND CONTRIBUTORS ``AS IS'' AND ANY
 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 * DISCLAIMED. IN NO EVENT SHALL OPERA SOFTWARE ASA AND CONTRIBUTORS BE LIABLE FOR ANY
 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */
 -->
<html>
<head>
<title> </title>
<style type='text/css'>

body {
  text-align:center;
  }

li {
  width:50px;
  height:50px;
  cursor:pointer;
  opacity:0;
  background-color:#009;
  display:table-cell;
  }

ul {
  display:table-row;
  
  list-style:none;
  margin:0;
  padding:0;
  }

div {
  display:table;
  xxborder-spacing:10px;
  margin:0 auto;
  border:1px solid #666;
  }

</style>

<script  type='text/javascript' src='../../animation.js' ></script>
<script type='text/javascript'>

var animationHandler=function(event, to)
{
  var ele=event.target, animation=ele._animation_fade;
  if(ele.nodeName.toLowerCase()=='li')
  {
    if(!animation)
    {
      animation=ele._animation_fade=ele.createAnimation();
      animation.speed=60;
      animation.style.opacity=0;
      animation.accelerationProfile=animation.accelerate;
      animation.fade=function(to)
      {
        if(this._isrunning) this.stop();
        this.addAnimation('opacity', this.style.opacity, to).run();
      }
    }
    animation.fade(to);
  }
}
document.addEventListener('mouseover', function(event){animationHandler(event, 1)}, false);
document.addEventListener('mouseout', function(event){animationHandler(event, 0)}, false);


var counter=0;
var output=null;
onload=function()
{
  output=document.getElementById('output').appendChild(document.createElement('input'));
}
o_animationTimer.setOnFrame
(
  function(framerate)
  {
    output.value=framerate;
  }
)
/*
document.addEventListener
(
  'OAnimationFrame', 
  function(event)
  {
    output.value='frame: '+(counter++);
  }, 
  false
);
*/
</script>
</head>

<body>
<h1>Animation Library: Fade</h1>
<div>
<ul><li><li><li><li><li><li><li><li><li><li></ul>
<ul><li><li><li><li><li><li><li><li><li><li></ul>
<ul><li><li><li><li><li><li><li><li><li><li></ul>
<ul><li><li><li><li><li><li><li><li><li><li></ul>
<ul><li><li><li><li><li><li><li><li><li><li></ul>
<ul><li><li><li><li><li><li><li><li><li><li></ul>
<ul><li><li><li><li><li><li><li><li><li><li></ul>
<ul><li><li><li><li><li><li><li><li><li><li></ul>
<ul><li><li><li><li><li><li><li><li><li><li></ul>
<ul><li><li><li><li><li><li><li><li><li><li></ul>
</div>
<p id='output'>
 <p style="position: absolute; bottom: 1em; left: 1em; border: 1px dotted red; background: infobackground; z-index: -1; padding: .4em;">
  This demo is made with the <a href="../../animation.js">Opera animation library</a>.
 </p>
</body>
</html>
